সুডো-এলিমেন্ট কি?
সিএসএস সুডো-এলিমেন্ট দ্বারা একটি এলিমেন্টের নির্দিষ্ট অংশকে সিলেক্ট করে স্টাইল করা হয়।
উদাহরণস্বরুপঃ
- একটি এলিমেন্টের প্রথম অংশ বা প্রথম লাইনের স্টাইল পরিবর্তন।
- একটি এলিমেন্টের পূর্বে এবং পরে কন্টেন্ট যোগ।
সকল সিএসএস সুডো-এলিমেন্ট
| সিলেক্টর | উদাহরণ | বর্ণনা |
|---|---|---|
::after | p::after | < p> এলিমেন্টের পরে কন্টেন্ট যোগ করবে। |
::before | p::before | < p> এলিমেন্টের পূর্বে কন্টেন্ট যোগ করবে। |
::first-letter | p::first-letter | < p> এলিমেন্টের প্রথম শব্দটি সিলেক্ট করবে। |
::first-line | p::first-line | < p> এলিমেন্টের প্রথম লাইনটিকে সিলেক্ট করবে। |
::selection | p::selection | ব্যবহারকারী কর্তৃক সিলেক্টকৃত < p> এলিমেন্টের অংশকে সিলেক্ট করবে। |
গঠণপ্রণালী
selector::pseudo-element {
property: value;
}সিএসএস(১) এবং সিএসএস(২)-এ সুডো-এলিমেন্ট এবং সুডো-ক্লাসে একটি কোলন ব্যবহার হতো। সিএসএস(৩)-এ সুডো-এলিমেন্টে একটি কোলন ব্যবহারের পরিবর্তে দুইটি কোলন ব্যবহারের প্রচলন করে। সুডো-এলিমেন্ট এবং সুডো-ক্লাসের গঠণপ্রণালীর মধ্যে পার্থক্য তৈরি করার জন্য ইহা প্রচলন করা হয়েছিল।
::first-line সুডো-এলিমেন্ট
::first-line সুডো-এলিমেন্টটি একটি টেক্সটের প্রথম লাইনকে সিলেক্ট করার জন্য ব্যবহার করা হয়।
সিএসএস সুডো-এলিমেন্ট (CSS Pseudo-element) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p::first-line {
color: limegreen;
text-decoration: underline;
}
</style>
</head>
<body>
<p>প্রথম লাইনের কালার পরিবর্তন হয়েছে।<br>
দ্বিতীয় লাইনের কালার পরিবর্তন হয়নি।<br>
তৃতীয় লাইনের কালার পরিবর্তন হয়নি।</p>
</body>
</html>
বিঃদ্রঃ ::first-line সুডো-এলিমেন্টটি শুধুমাত্র ব্লক-লেভেল এলিমেন্টের জন্যে ব্যবহার করা যায়।
::first-line সুডো-এলিমেন্টে নিম্নলিখিত প্রোপার্টিগুলো ব্যবহার করা যায়ঃ
fontcolorbackgroundword-spacingletter-spacingtextVertical-aligntext-transforline-heightclear
::first-letter সুডো-এলিমেন্ট
একটি টেক্সটের প্রথম অক্ষরকে সিলেক্ট করার জন্য ::first-letter সুডো-এলিমেন্টটি ব্যবহার করা হয়।
সিএসএস সুডো-এলিমেন্ট (CSS Pseudo-element) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p::first-letter {
font-size: 300%;
font-weight: bold;
}
</style>
</head>
<body>
<h3>নিচের লাইনটির প্রথম অক্ষরের আকার স্বাভাবিকের চেয়ে বড় হবে।</h3>
<p>পত্রিকার লাইনের প্রথম অক্ষর এরকম বড় করে লেখা হয়।</p>
</body>
</html>
বিঃদ্রঃ::first-letter সুডো-এলিমেন্টটি শুধুমাত্র ব্লক-লেভেল এলিমেন্টের জন্য ব্যবহার করা যায়।
::first-letter সুডো-এলিমেন্টে নিম্নলিখিত প্রোপার্টিগুলো ব্যবহার করা যায়ঃ
fontcolorbackgroundmarginpaddingbordertext-decorationvertical-align("float"যদি"none"হয়)text-transformline-heightfloatclear
সুডো-এলিমেন্ট এবং সিএসএস ক্লাস
সুডো-এলিমেন্টগুলো সিএসএস ক্লাসের সাথেও ব্যবহার করা যায়ঃ
সিএসএস সুডো-এলিমেন্ট (CSS Pseudo-element) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p.line::first-letter {
font-size: 300%;
font-weight: bold;
}
</style>
</head>
<body>
<p>নিচের লাইনটির প্রথম অক্ষরের আকার স্বাভাবিকের চেয়ে বড় হবে।</p>
<p class="line">পত্রিকার লাইনের প্রথম অক্ষর এরকম বড় করে লেখা হয়।</p>
</body>
</html>একাধিক সুডো-এলিমেন্টের ব্যবহার
আপনি চাইলে একই এলিমেন্টে একাধিক সুডো এলিমেন্ট ব্যবহার করতে পারেন।
সিএসএস সুডো-এলিমেন্ট (CSS Pseudo-element) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p::first-letter {
font-size: 300%;
font-weight: bold;
}
p::first-line {
color: limegreen;
text-decoration: underline;
}
</style>
</head>
<body>
<h5>নিচের লাইনটির প্রথম অক্ষরের আকার স্বাভাবিকের চেয়ে বড় হবে। এছাড়াও পুরো লাইনে ব্যাকগ্রাউন্ডের কালার
এবং টেক্সটের নিচে আন্ডারলাইন যুক্ত হবে।</h5>
<p>পত্রিকার লাইনের প্রথম অক্ষর এরকম বড় করে লেখা হয়।<br>
দ্বিতীয় লাইনের কালার পরিবর্তন হয়নি।<br>
তৃতীয় লাইনের কালার পরিবর্তন হয়নি।</p>
</body>
</html>::before সুডো-এলিমেন্ট
একটি এলিমেন্টের আগে কন্টেন্ট যোগ করার জন্য ::before সুডো-এলিমেন্ট ব্যবহার করা হয়।
সিএসএস সুডো-এলিমেন্ট (CSS Pseudo-element) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h1::before {
content: url(smallimg.jpg);
}
</style>
</head>
<body>
<h4>এলিমেন্টের পূর্বে কন্টেন্ট যোগ করতে ::before সুডো-এলিমেন্ট ব্যবহার করতে হয়।</h4>
<br>
<h1>এই লাইনের পূর্বে একটি ইমেজ যুক্ত করা হয়েছে।</h1>
</body>
</html>::after সুডো-এলিমেন্ট
একটি এলিমেন্টের পরে কন্টেন্ট যোগ করার জন্য ::after সুডো-এলিমেন্ট ব্যবহার করা হয়।
সিএসএস সুডো-এলিমেন্ট (CSS Pseudo-element) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
h1::after {
content: url(smallimg.jpg);
}
</style>
</head>
<body>
<h4>এলিমেন্টের পরে কন্টেন্ট যোগ করতে ::after সুডো-এলিমেন্ট ব্যবহার করতে হয়।</h4>
<br>
<h1>এই লাইনের পরে একটি ইমেজ যুক্ত করা হয়েছে।</h1>
</body>
</html>::selection সুডো-এলিমেন্ট
ব্যবহারকারী একটি এলিমেন্টের কোন অংশকে সিলেক্ট করলে, সিলেক্টকৃত অংশকে স্টাইল করার জন্য ::selection সুডো-এলিমেন্টটি ব্যবহার করা হয়।
::selection সুডো-এলিমেন্টের সাথে নিচের সিএসএস প্রোপার্টিগুলো ব্যবহার করা যায়ঃ
- color
- background
- cursor
- outline
সিএসএস সুডো-এলিমেন্ট (CSS Pseudo-element) - Example
<!DOCTYPE html>
<html>
<head>
<title>সিএসএস উদাহরণ</title>
<style>
p::selection {
background: green;
color: white;
}
</style>
</head>
<body>
<h3>নিচের p এলিমেন্টের টেক্সট সিলেক্ট করুন!!</h3>
<p>এই লাইনের টেক্সট সিলেক্ট করুন এবং ::selection সুডো এলিমেটের ব্যবহার দেখুন।</p>
</body>
</html>
Read more
HSC Biology (১ম ও ২য় পত্র) E-Question Bank(সম্পূর্ণ ঢাকা বোর...
HSC Biology (১ম ও ২য় পত্র) E-Question Bank(সম্পূর্ণ রাজশাহী...
HSC Biology (১ম ও ২য় পত্র) E-Question Bank(সম্পূর্ণ চট্টগ্রা...
HSC Biology (১ম ও ২য় পত্র) E-Question Bank(সম্পূর্ণ সিলেট বো...
HSC Biology (১ম ও ২য় পত্র) E-Question Bank(সম্পূর্ণ যশোর বোর...
ভর্তি প্রস্তুতি || রাজশাহী বিশ্ববিদ্যালয় || জীববিজ্ঞান ১ম প...
ভর্তি প্রস্তুতি || রাজশাহী বিশ্ববিদ্যালয় || জীববিজ্ঞান ২য় পত...
🎯 চট্টগ্রাম বিশ্ববিদ্যালয় || 🎓 A Unit || 📚 ২০২৪-২০২৫ ভর্ত...
ভর্তি প্রস্তুতি || রাজশাহী বিশ্ববিদ্যালয় C- Unit মডেল টেস্ট(...
